import { defineComponent, ref } from "vue";
import CountUp from 'vue-countup-v3';
import type { CountUpOptions } from 'vue-countup-v3';
import { useI18n } from "vue-i18n";
import './index.less'

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const endValueRef1 = ref(20);
        const endValueRef2 = ref(10);
        const endValueRef3 = ref(1000);
        const endValueRef4 = ref(10);
        // coutup.js options
        const options: CountUpOptions = {
            enableScrollSpy: true,              //在可视范围内才开始动画
            scrollSpyOnce: true,                //滚动到该元素时执行数字滚动动画是否执行一次
            suffix: '+',                        //数字后缀     
        }
        const options3: CountUpOptions = {
            enableScrollSpy: true,              //在可视范围内才开始动画
            scrollSpyOnce: true,                //滚动到该元素时执行数字滚动动画是否执行一次
            useGrouping: false,                 //是否使用千位分隔符）显示
            suffix: '+',
        }
        const options4: CountUpOptions = {
            enableScrollSpy: true,              //在可视范围内才开始动画
            scrollSpyOnce: true,                //滚动到该元素时执行数字滚动动画是否执行一次
            useGrouping: false,                 //是否使用千位分隔符）显示
            suffix: 'W+',                        //数字后缀     
        }
        return () => (
            <div class='count'>
                <div class='counts'>
                    <div class='part'>
                        <CountUp
                            endVal={endValueRef1.value}      //结束值                Number | String
                            duration={3}                    //动画时长                  Number
                            // decimalPlaces={2}               //是否显示小数点后几位      Number
                            options={options}
                        // loop={2}                        //重复播放几次              Boolean | Number
                        // delay={2}                       //延迟播放时间              Number
                        // onInit={onInit}                 //CountUp 实例初始化完成触发
                        // onFinished={onFinished}         //计数结束时触发
                        />
                        <div class='text'>{t('home.count1')}</div>
                    </div>
                    <div class='part'>
                        <CountUp
                            endVal={endValueRef2.value}      //结束值                Number | String
                            duration={3}                    //动画时长                  Number
                            options={options}
                        />
                        <div class='text'>{t('home.count2')}</div>
                    </div>
                    <div class='part'>
                        <CountUp
                            endVal={endValueRef3.value}      //结束值                Number | String
                            duration={3}                    //动画时长                  Number
                            options={options3}
                        />
                        <div class='text'>{t('home.count3')}</div>
                    </div>
                    <div class='part'>
                        <CountUp
                            endVal={endValueRef4.value}      //结束值                Number | String
                            duration={3}                    //动画时长                  Number
                            options={options4}
                        />
                        <div class='text'>{t('home.count4')}</div>
                    </div>
                </div>
            </div>
        );
    },
})
